<template>
	<div class="jk-view-box">
		<div v-if="loading" class="jk-loading-bar">
			<div class="jk-loading">
				<span class="el-icon-loading" style="font-size: 38px;"></span>
				<span>加载中...</span>
			</div>
		</div>
		<slot />
	</div>
</template>
<script>
    export default {
        name: 'JkView',
        props: {
            loading: {
                type: Boolean,
                default: false
            }
        }
    };
</script>
<style scoped>
    .jk-view-box {
        position: relative;
        padding: 0px 12px;
    }

    .jk-loading-bar {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        /*align-items: center;*/
        z-index: 101;
    }

    .jk-loading {
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        align-items: center;
        color: #409EFF;
        padding-top: 20px;
    }
</style>
